圖片來源：派星機
想不到今天還是派星機吧

本篇將紀錄取消發泡現象之操術法，以及利用設立事件觀測器時之參數，說明造成發泡現象之事件流之順序機制。

戳破事件虛幻泡沫之術：stopPropagation()

施用此術可取消發泡現象，防止泡泡碰觸發生事件之元素以外之元素。

規範原文：
When dispatched in a tree, invoking this method prevents event from reaching any objects other than the current object.

以前篇之術式為例，將函式之術showTarget添加戳破事件虛幻泡沫之術：

function showTarget(event) {
  // 戳破事件虛幻泡沫之術
  event.stopPropagation();
  
  const targetName = this.attributes.name.value;
  target.innerHTML += `<p>鼠輩碰觸了${targetName}<p>`;
  console.log(targetName);
}

此時，介面僅顯示鼠輩碰觸之元素，並未觸發其父元素之mouseover事件。

示例處

再述 EventListener

先前記述事件觀測器施於元素之操術法如下：
某個元素.addEventListener("事件", 函式之術);

然完整之操術法應為：
某個元素.addEventListener("事件", 函式之術, 其餘選項);

其餘選項為一物件，其中有一鍵名為capture，即與發泡現象之事件流之順序機制有關。

當元素發生事件時，事件流會依照接觸目標元素前後分為兩時期：capturing phase及bubbling phase。以前篇之術式為例，當鼠輩接觸泡泡子時，事件流順序如下：

獲取泡泡爺之事件觀測器之內容
↓
獲取泡泡爸之事件觀測器之內容
↓
獲取泡泡子之事件觀測器之內容
↓
接觸到目標元素：泡泡子
↓
觸發泡泡子之事件觀測器之術式
↓
觸發泡泡爸之事件觀測器之術式
↓
觸發泡泡爺之事件觀測器之術式

其中獲取時期即為capturing phase，觸發時期即為bubbling phase。

若將泡泡子之事件觀測器其餘選項參數之capture設為true：

bubbleGrandparent.addEventListener("mouseover", showTarget, { 
    capture: true 
});
bubbleParent.addEventListener("mouseover", showTarget, { 
    capture: true 
});
bubbleChild.addEventListener("mouseover", showTarget, { 
    capture: true 
});

觀察鼠輩碰觸泡泡子後之狀態，可發現下方顯示處之順序為，碰觸泡泡爺→碰觸泡泡爸→碰觸泡泡子，意同術式在獲取時期capturing phase時立即執行函式之術。

示例處

至於為何術式會有執行之時機差異，其歷史來自於早期不同介面系統設計相異，而現今介面統一設計之時，決議將兩者皆納入而產生之情況。

示例之術式

https://github.com/CReticulata/2024ithome/tree/main/Day08

翻譯

發泡現象：event bubbling
事件觀測器：event listener
事件流：event flow
元素：element
操術法：語法
鍵：key
戳破事件虛幻泡沫之術：Event.stopPropagation()
介面：browser

相關連結

• stopPropagation() - whatwg.org
• eventPhase - whatwg.org
• Event capture - MDN
• addEventListener - MDN